<template>
    <view class="container l-class">
        <view mut-bind:tap="onTapTitle" class="container-title l-title-class">
            <view :style="disable ? 'color:#DEE2E6' : ''" v-if="!customTitle">{{ titleClone }}</view>
            <l-icon
                class="container-title-icon"
                v-if="!customTitle"
                :style="isExpandContent ? 'transform:rotate(-180deg);' : ''"
                name="down"
                size="28"
                :color="disable ? '#DEE2E6' : '#333'"
            ></l-icon>
            <slot name="title"></slot>
        </view>
        <view @transitionend.stop.prevent="onTransitionend" class="container-body" :style="'height:' + bodyHeight + ';transition-duration:' + animationTime + 's'">
            <view class="container-body-wrapper l-body-class">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
import lList from '../list/index';
import lIcon from '../icon/index';
import nodeUtil from '../core/utils/node-util';
export default {
    unicomGroup: ['collapse'],
    data() {
        return {
            bodyHeight: '0',
            isExpandContent: false,
            _idDefault: -1,
            titleClone: ''
        };
    },
    externalClasses: ['l-class', 'l-title-class', 'l-body-class'],
    relations: {
        '../collapse/index': {
            type: 'parent'
        }
    },
    options: {
        multipleSlots: true,
        pureDataPattern: /^_/
    },
    props: {
        itemId: {
            type: String,
            default: 'default'
        },
        title: {
            type: String,
            default: '默认标题'
        },
        customTitle: {
            type: Boolean,
            default: false
        },
        disable: {
            type: Boolean,
            default: false
        },
        animationTime: {
            type: String,
            default: '0.3'
        }
    },
    methods: {
        async onTapTitle() {
            if (this.disable) {
                return;
            }
            let t = this.getRelationNodes('collapse');
            await t[0].onTapCollapseItem(this);
        },
        async foldContent() {
            const t = await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper');
            if (this.isExpandContent) {
                this.setData({
                    bodyHeight: t.height + 'px'
                });
                setTimeout(() => {
                    this.setData({
                        isExpandContent: false,
                        bodyHeight: '0px'
                    });
                }, 20);
            } else {
                this.setData({
                    isExpandContent: false,
                    bodyHeight: '0px'
                });
            }
        },
        async expandContent() {
            const t = await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper');
            this.setData({
                isExpandContent: true,
                bodyHeight: t.height + 'px'
            });
        },
        onTransitionend() {
            if (this.isExpandContent) {
                this.setData({
                    bodyHeight: 'auto'
                });
            }
        }
    },
    created: function () {}
};
</script>
<style>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.container-title {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    align-items: center;
    font-size: 32rpx;
    color: #333;
}
.container-title-l-icon {
    transition: 0.3s;
}
.container-body {
    width: 100%;
    color: #888;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: height 0.3s ease-in-out;
    overflow: hidden;
}
.container-body-wrapper {
    position: relative;
    padding: 10rpx;
}
</style>
